<template>
  <div class="meetingRoomBox">
    <el-row>
      <el-col :span="6">
        <el-input
          v-model="searchTxt"
          placeholder="Please input"
          class="input-with-select"
        >
          <template #prepend>
            <el-select v-model="searchSelect" placeholder="搜索类目">
              <el-option label="会议室名/号" value="1" />
              <el-option label="容量" value="2" />
            </el-select>
          </template>
          <template #append>
            <el-button :icon="Search" @click="searchFn" />
          </template>
        </el-input>
      </el-col>
      <el-col :span="1">
        <el-button @click="addFn">
          添加会议室信息
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="会议室名" width="150" />
      <el-table-column prop="state" label="状态" width="150" />
      <el-table-column prop="number" width="150">
        <template #header>
          容量
          <el-icon v-if="sortState===0"><ArrowUp @click="sortFn" /></el-icon>
          <el-icon v-else><ArrowDown @click="sortFn" /></el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="config" label="配置" width="450" />
      <el-table-column prop="id" fixed="right" label="操作" width="120">
        <template #default="{row}">
          <el-button link type="primary" size="small" @click="setFn(row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <DialogForm
      :formVisible="formVisible"
      @changeVisible="changeVisibleFn"
      @submit="submitFn"
      :formData="formData"
      :type="type"
    />
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { getMeetingRoom, addMeetingRoom, setMeetingRoom } from "../../api/index.js";
import { ArrowUp, ArrowDown, Search } from '@element-plus/icons-vue';
import DialogForm from "./DialogForm.vue";

onMounted(()=>{
  console.log("1");
})

// ========
const userMsg = localStorage.getItem("userMsg") ? JSON.parse(localStorage.getItem("userMsg")) : {};
const token = userMsg.token;

// 创建响应式表格数据
const tableData = reactive([]);
// 封装获取会议室信息功能
function getMR(){
  tableData.splice(0);
  getMeetingRoom({
    token: token
  }).then(res=>{
    if(res.data.code === 1){
      // 解析之后，添加到表格数据
      const mData = res.data.data;
      mData.forEach(val=>{
        tableData.push({
          id: val.rId,
          name: val.rName,
          state: val.state ? "已占用" : "可用",
          number: val.number,
          config: val.config
        })
      })
    }else{
      console.log(res.data)
    }
  })
}
// 执行获取会议室信息功能
getMR();

// ==========

// 排序功能
// 升序或降序的状态：0升，1降
let sortState = ref(0);
// 点击搜索的处理函数
const sortFn = ()=>{
  if(sortState.value === 0){
    tableData.sort((a,b)=>{
      return a.number - b.number;
    })
    sortState.value = 1;
  }else{
    tableData.sort((a,b)=>{
      return b.number - a.number;
    })
    sortState.value = 0;
  }
}

// ========

// 搜索功能
// 搜索关键字
const searchTxt = ref("");
// 搜索类目
const searchSelect = ref("");
// 发起搜索请求
const searchFn = function(){
  const obj = {
    token: token
  }
  // 根据搜索类目决定向后端发送的字段
  if(searchSelect.value === "1"){
    obj.rName = searchTxt.value;
  }
  if(searchSelect.value === "2"){
    const n = Number(searchTxt.value);
    if(n>=1 && n<10){
      obj.size = "small";
    }
    if(n>=10 && n<20){
      obj.size = "middle";
    }
    if(n>=20){
      obj.size = "large";
    }
  }
  // 发起搜索请求
  getMeetingRoom(obj).then(res=>{
    if(res.data.code === 1){
      tableData.splice(0);
      res.data.data.forEach(val=>{
        tableData.push({
          name: val.rName,
          state: val.state ? "可用" : "已占用",
          number: val.number,
          config: val.config
        })
      })
    }else{
      console.log(res.data)
    }
  })
}

// =========

// 弹出框的显示状态
const formVisible = ref(false);
// 子组件修改了弹出框的显示状态
const changeVisibleFn = function(v){
  formVisible.value = v;
}
// 弹出框中表单的响应式数据
const formData = reactive({
  name:"",
  number:"",
  config:""
});
// 弹出框中表单提交按钮的功能类型：0添加，1修改
const type = ref(0);

// 点击修改按钮
const setFn = (rowData) => {
  // 显示弹出框
  formVisible.value = true;
  // 修改表单的响应式数据
  formData.name = rowData.name;
  formData.number = rowData.number;
  formData.config = rowData.config;
  formData.id = rowData.id;
  // 修改提交按钮的功能类型：修改
  type.value = 1;
}
// 点击添加按钮
const addFn = ()=>{
  // 显示弹出框
  formVisible.value = true;
  // 修改提交按钮的功能类型：修改
  type.value = 0;
}

// 提交弹出框内的表单数据
const submitFn = function(formData){
  if(type.value === 0){
    // 执行添加的数据请求
    requireMeetingRoom(addMeetingRoom, formData)
  }else if(type.value === 1){
    // 执行修改的数据请求
    requireMeetingRoom(setMeetingRoom, formData, formData.id);
  }
}
function requireMeetingRoom(fnName, formData, id){
  const obj = {
    token: token,
    rName: formData.name,
    number: formData.number-0,
    config: formData.config
  }
  if(id) obj.rId = id;
  fnName(obj).then(res=>{
    if(res.data.code === 1){
      getMR();
    }
  })
}

</script>
